import advList from "../views/advList.ejs";
import {deleteAdvListById, getAdvList, getAdvListById, postAdvList, putAdvList} from "../api/advList";
import advTable from "../components/AdvTable.ejs";
// 实现图片预览
const advPicChange = function(e){
	// 1- 生成一个FileReader实例
	const reader = new FileReader();
	// 2- readAsDataURL
	reader.readAsDataURL(e.target.files[0]);
	// 3- onload
	reader.onload = function(ev){
		const myImg = document.querySelector("#myImg");
		myImg.src=ev.target.result;
		myImg.style.display = "block";
		
		// console.log(ev.target.result)
	}
}
const advListSaveHandler = async function(){
	const formdata = new FormData(document.advForm);
	if(formdata.get("id")){
		// 修改
		await putAdvList(formdata);
		getAdvListAsync(formdata.get("page"));
	}else{
		// 添加
		await postAdvList(formdata);
		getAdvListAsync();
	}
	$("#modal-default").modal("hide");
	
}
const advTableHandler = async function(e){
	const el = e.target;
	if(el.classList.contains("page-link")){
		getAdvListAsync(el.dataset.page);// 分页
	}else if(el.classList.contains("btn-danger")){
		if(window.confirm("您确定要删除该条信息吗？")){
			const {msg} = await deleteAdvListById(el.dataset.id);
			toastr.success(msg);
			console.log("page",el.dataset.page);
			getAdvListAsync(el.dataset.page)
		}
	}else if(el.classList.contains("btn-success")){
		// 修改广告
		document.querySelector(".modal-title").innerHTML="修改广告";
		const {info} = await getAdvListById(el.dataset.id);
		const advForm = document.advForm;
		advForm.advTitle.value = info.advTitle;
		advForm.id.value = info._id;
		advForm.advType.value = info.advType;
		advForm.advHref.value = info.advHref;
		advForm.advOrder.value = info.advOrder;
		advForm.page.value = el.dataset.page;
		document.querySelector("#myImg").src = "/bang/"+info.advPic;
		$("#modal-default").modal("show");
	}

}
// 获取广告列表
const getAdvListAsync = async function(pageNo=1,pageSize=3){
	document.querySelector("#advTable").innerHTML = "<h3>正在拼命加载中……</h3>"
	// 获取广告列表数据
	const result = await getAdvList(pageNo,pageSize,document.querySelector("#keyword").value.trim());
	// 更新视图
	document.querySelector("#advTable").innerHTML = advTable(result);
	// document.querySelector("#pageList").onclick = function(e){
	// 	console.log(e.target.dataset.page)
	// 	getAdvListAsync(e.target.dataset.page)
	// }
}
export default function(){
	return (req,res)=>{
		if(localStorage.getItem("adminName")){
			res.render(advList());
			// 实现图片预览
			document.querySelector("#advPic").onchange = advPicChange;
			// 实现广告的添加
			document.querySelector("#adv-save").onclick =advListSaveHandler;
			//  点击添加广告按钮
			document.querySelector("#addAdvBtn").onclick = function(){
				document.querySelector(".modal-title").innerHTML="添加广告";
				$("#modal-default").modal("show");
				// 预览图片
				document.querySelector("#myImg").style.display = "none";
				// 清空表单
				document.advForm.reset();
			};
			// 完成搜索
			document.querySelector("#searchBtn").onclick = function(){
				getAdvListAsync();
			}
			getAdvListAsync();
			// 增加表格与分页相关的委托
			document.querySelector("#advTable").onclick = advTableHandler;
		}else{
			router.go("/login");
		}
		
		
	}
}